<!--
@Author bhudy
@DescriptSysPluginugin
@Date Tue Nov 05 23:15:21 CST 2019
-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>BHUDY - 首页</title>
    <link rel="icon" href="/res/images/ico.png" type="image/x-icon">
    <script src="/res/js/bhudy.js"></script>
    <script src="/res/layui/layui.js"></script>
    <style>
        iframe {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">BHUDY 管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" alt="fail to load" class="layui-nav-img">
                    <span id="userName"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li id="message" class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-notice"></i>
                    <span>消息</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">没有收到任何消息</a><dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/sysLogout">登出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="menus" class="layui-nav layui-nav-tree" lay-filter="menus">

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="pagetabs">
            <ul class="layui-tab-title" style="position: absolute; top: 0; left: 0; right: 0;"></ul>
            <div class="layui-tab-content" style="position: absolute; top: 42px; bottom: 0; left: 0; right: 0;"></div>
        </div>
    </div>


    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © BHUDY
    </div>
</div>
</body>
</html>

<script>
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        var element = layui.element,
            layer = layui.layer,
            $ = layui.jquery,
            socket;

        $("#userName").text(getCookie("user_name"));

        //动态菜单
        $.getJSON("/api/v1/sysTreeMenus", "", function (resultData) {
            $.each(resultData.data, function (i, obj) {
                var content = `<li class="layui-nav-item menu menu-${obj.id}" data-menuid="${obj.id}" data-url="${obj.url}">
                                <a href="javascript:;">${obj.name}</a>`;
                //这里是添加所有的子菜单
                content += loadchild(obj);
                content += '</li>';
                $("#menus").append(content);
            });

            element.init(); //一定初始化一次
        });

        //组装子菜单的方法
        function loadchild(obj) {
            if (obj == null) {
                return;
            }

            var content = '';
            if (obj.childrenMenuList != null && obj.childrenMenuList.length > 0) {
                content += '<dl class="layui-nav-child">';
            } else {
                content += '<dl>';
            }

            if (obj.childrenMenuList != null && obj.childrenMenuList.length > 0) {
                $.each(obj.childrenMenuList, function (i, note) {
                    content += '<dd class="menu menu-' + note.id + '" data-menuid="' + note.id + '" data-url="' + note.url + '">';
                    content += '<a href="javascript:;">' + note.name + '</a>';
                    if (note.childrenMenuList == null) {
                        return;
                    }
                    content += loadchild(note);
                    content += '</dd>';
                });

                content += '</dl>';
            }
            return content;
        }

        //一些事件监听
        element.on("tab(pagetabs)", function (data) {
            $(".menu").removeClass("layui-this");
            if (!$(".menu-" + this.getAttribute("lay-id")).hasClass("layui-nav-itemed")) {
                $(".menu-" + this.getAttribute("lay-id")).addClass("layui-this");
            }
        });


        element.on('nav(menus)', function (elem) {
            //得到当前点击的DOM对象
            var url = $(elem).parent().data("url");
            var menuid = $(elem).parent().data("menuid");
            if (url && url !== "") {
                if ($("li[lay-id='" + menuid + "']").length == 0) {
                    element.tabAdd("pagetabs", {
                        title: $(elem).text(),
                        content: "<iframe src=\"/sysRedirect?url=" + url + "\" frameborder=\"0\"></iframe>", //支持传入html
                        id: menuid
                    });
                }
                element.tabChange("pagetabs", menuid);
            }
        });

        if (typeof(WebSocket) == "undefined") {
            // console.log("您的浏览器不支持WebSocket");
        } else {
            // console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
            // + getCookie("user_id")
            socket = new WebSocket((window.location.protocol + "//" + window.location.host + "/sys/sysWebsocket").replace("http", "ws"));
            //打开事件
            socket.onopen = function () {
                layer.msg('Socket 已打开');
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                var msgJson = JSON.parse(msg.data);
                $("#message dl").append(`<dd><a href="javascript:;" style="color: #1E9FFF;">${msgJson.title}</a></dd>`);
                $("#message>a").css("color", "#1E9FFF");
                $("#message>a>i").removeClass("layui-icon-unlink").addClass("layui-icon-notice");
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function () {
                $("#message dl").html(`<dd><a href="javascript:;" style="color: #FF5722;">Socket已断开连接</a><dd>`);
                $("#message>a").css("color", "#FF5722");
                $("#message>a>i").removeClass("layui-icon-notice").addClass("layui-icon-unlink");
            };
            //发生了错误事件
            socket.onerror = function () {
                //此时可以尝试刷新页面
                layer.msg("Socket发生了错误");
            }
        }
    });


</script>